<!-- 首页 -->
<template>
	<view class="container">
		<view class="c-info">
			<!-- <view class="info-avatar">
				<image :src="baseURL + info.art_img" mode=""></image>
			</view>
			<view class="info-header">

			</view> -->
			<view class="info-main">
				<view class="info-img">
					<text>证件照</text>
					<image :src="baseURL + info.art_img" mode=""></image>
				</view>
				
				<view class="info-strip">
					<text class="info-strip-title">姓名</text>
					<text>{{info.name}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">性别</text>
					<text>{{info.sex==1?'男':'女'}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">生日</text>
					<text>{{info.birth}}</text>
				</view>
				<view class="info-line">
					<u-line></u-line>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">国籍</text>
					<text>{{info.national==1?'中国':info.national==2?'港澳台':'国外'}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">民族</text>
					<text>{{info.nation}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">证件类型</text>
					<text>{{info.document_type==1?'身份证':'护照'}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">证件号</text>
					<text>{{info.document_nums}}</text>
				</view>
				<view class="info-img">
					<text>证件照</text>
					<image :src="baseURL + info.document_img" mode=""></image>
				</view>
				<view class="info-line">
					<u-line></u-line>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">联系电话</text>
					<text>{{info.contact_name}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">工作单位</text>
					<text>{{info.organ_name}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">单位地址</text>
					<text>{{info.organ_address}}</text>
				</view>
				<view class="info-line">
					<u-line></u-line>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">毕业院校</text>
					<text>{{info.grad_school}}</text>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">学历</text>
					<text>{{info.educational}}</text>
				</view>
				<view class="info-img">
					<text>毕业照片</text>
					<image :src="baseURL + info.grad_card_img" mode=""></image>
				</view>
				<view class="info-line">
					<u-line></u-line>
				</view>
				<view class="info-strip">
					<text class="info-strip-title">邮寄地址</text>
					<text>{{info.address}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		props: ["info"],
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0;
		.c-info {
			position: relative;

			.info-header {
				height: 100rpx
			}
			.info-avatar {
				position: absolute;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
				width: 180rpx;
				height: 180rpx;
				border: 2rpx solid #aaa;
				border-radius: 50%;
				overflow: hidden;
				&>image {
					width: 100%;
					height: 100%;
				}
			}
			.info-main {
				background-color: #fff;
				padding: 30rpx 30rpx 50rpx 30rpx;
				box-sizing: border-box;
				border-radius: 15rpx;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);

				.info-line {
					padding: 10rpx 0;
				}

				.info-strip {
					display: flex;
					justify-content: space-between;
					line-height: 70rpx;

					&>text {
						color: #333;
						font-size: 34rpx;
					}

					.info-strip-title {
						color: #999;
						font-weight: bold;
						font-size: 32rpx;
					}
				}
				
				.info-img{
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding: 10rpx 0;
					&>text{
						color: #999;
						font-weight: bold;
						font-size: 32rpx;
					}
					&>image{
						width: 120rpx;
						height: 120rpx;
					}
				}
			}

		}
	}
</style>
